<ng-container *ngIf="!outlet.isActivated">
    <div class="p-3">
        <div class="row mb-3">
            <div class="col-xl-6">
                <div class="card h-100">
                    <div class="card-header border-bottom">订单占比</div>
                    <div class="card-body flex-grow-1 d-flex">
                        <div class="position-relative flex-grow-1">
                            <div tsEchart [option]="optionFir" resize="true" class="w-100 h-100"></div>
                        </div>
                        <div class="flex-shrink-0 text-muted align-self-center" style="line-height:3;">
                            <p *ngFor="let k of legendFir">
                                <span class="dot dot-success"></span>
                                <span class="ml-2">{{k.th}} | 28.79% ¥ 4,544</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="card h-100">
                    <div class="card-header border-bottom">金额占比</div>
                    <div class="card-body flex-grow-1 d-flex">
                        <div class="position-relative flex-grow-1">
                            <div tsEchart [option]="optionSec" resize="true" class="w-100 h-100"></div>
                        </div>
                        <div class="flex-shrink-0 text-muted align-self-center" style="line-height:3;">
                            <p *ngFor="let k of legendSec">
                                <span class="dot dot-success"></span>
                                <span class="ml-2">{{k.th}} | 28.79% ¥ 4,544</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-xl-6">
                <div class="card h-100">
                    <div class="card-header border-bottom">回款占比</div>
                    <div class="card-body flex-grow-1 d-flex">
                        <div class="position-relative flex-grow-1">
                            <div tsEchart [option]="optionThree" resize="true" class="w-100 h-100"></div>
                        </div>
                        <div class="flex-shrink-0 text-muted align-self-center" style="line-height:3;">
                            <p *ngFor="let k of legendThree">
                                <span class="dot dot-success"></span>
                                <span class="ml-2">{{k.th}} | 28.79% ¥ 4,544</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="card h-100">
                    <div class="card-header border-bottom">车辆占比</div>
                    <div class="card-body flex-grow-1 d-flex">
                        <div class="position-relative flex-grow-1">
                            <div tsEchart [option]="optionFour" resize="true" class="w-100 h-100"></div>
                        </div>
                        <div class="flex-shrink-0 text-muted align-self-center" style="line-height:3;">
                            <p *ngFor="let k of legendFour">
                                <span class="dot dot-success"></span>
                                <span class="ml-2">{{k.th}} | 28.79% ¥ 4,544</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text bg-white">全部路线</span>
                </div>
                <div class="col-sm-4 px-0">
                    <select [(ngModel)]="goods.goodsParentType" class="custom-select b-t-l-radius b-b-l-radius" placeholder="请选择一级分类">
      <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
    </select>
                </div>
                <div class="input-group-prepend ml-3">
                    <span class="input-group-text bg-white">全部车辆</span>
                </div>
                <div class="col-sm-4 px-0">
                    <select [(ngModel)]="goods.getChildTypes" class="custom-select b-t-l-radius b-b-l-radius" placeholder="请选择一级分类">
      <option *ngFor="let type of childTypes" [ngValue]="type.value">{{type.text}}</option>
    </select>
                </div>
            </div>
            <div class="map-pad mb-4" #map="tsMap" tsMap (positionChange)="getPosition($event)" style="height:400px;"></div>

        </div>
    </div>
</ng-container>

<router-outlet #outlet="outlet"></router-outlet>